<template>
  <div class="vue-home-reserve" id="homeReserve">
    <h1 class="text-center hidden-xs">一键预约 三步轻松购</h1>

    <img class="visible-xs reserve-bg" :src="bg">

    <vue-form :state="formstate" v-model="formstate" @submit.prevent="onSubmit">
      <div class="row input-field margin-reset">
        <div class="col-sm-12">
          <validate>
            <input :class="['form-control', formstate.reserveName && formstate.reserveName.$invalid && (formstate.reserveName._hasFocused || formstate.reserveName.$submitted) ? 'error' : '']" v-model="reserveName" required name="reserveName" placeholder="姓名" />
          </validate>
        </div>
      </div>

      <div class="row input-field margin-reset">
        <div class="col-sm-12">
          <validate>
            <input :class="['form-control', formstate.reservePhone && formstate.reservePhone.$invalid && (formstate.reservePhone._hasFocused || formstate.reservePhone.$submitted) ? 'error' : '']" v-model="reservePhone" required name="reservePhone" placeholder="手机号码" cellphone-validator />
          </validate>
        </div>
      </div>

      <div class="row input-field margin-reset">
        <validate class="city-group">
          <div class="col-xs-6 s-first">
            <select id="province" ref="province" class="city-select form-control" name="province">
              <option>--省份--</option>
              <option v-for="(province, index) in allProvinces" :value="province[1]">{{province[0]}}</option>
            </select>
          </div>

          <div class="col-xs-6 s-last">
            <select id="city" ref="city" :class="['city-select', 'form-control', formstate.reserveStreetId && formstate.reserveStreetId.$invalid && (formstate.reserveStreetId._hasFocused || formstate.reserveStreetId.$submitted) ? 'error' : '']" name="reserveStreetId" v-model="reserveStreetId" required>
              <option value="">--市--</option>
            </select>
          </div>
        </validate>
      </div>

      <div class="row input-field margin-reset">
        <div class="col-sm-12 input-field">
          <button class="btn btn-primary btn-block submit">一键预约</button>
        </div>
      </div>
    </vue-form>

    <h1 class="text-center hidden-xs">今日已有
      <span class="text-red">5</span>人申请</h1>
    <hr class="hidden-xs">
    <transition-group tag="ul" class="gun-dong hidden-xs" enter-active-class="animated fadeInUp" leave-active-class="animated fadeOutUp" move-class="animated fadeOutUp">
      <li v-for="item in testData" :key="item.id" :style="{order: showIds.indexOf(item.id)}" v-show="jugeShow(item.id)">
        <div class="">{{item.date}}</div>
        <div class="">上海{{item.name}}预约成功</div>
      </li>
    </transition-group>
  </div>
</template>

<script>
import VueForm from 'vue-form'
import Query from '../query'
import ErrorDialog from 'error_alert'
import SuccessDialog from 'success_alert'
import bg from '../../../assets/images/reserve-bg.png'

var options = {
  validators: {
    'cellphone-validator': function (value, attrValue, vnode) {
      return /^\d{11}$/.test(value)
    }
  }
}

export default {
  name: "homeReserve",

  mixins: [new VueForm(options)],

  data: () => ({
    bg: bg,
    allProvinces: [],
    formstate: {},
    reserveName: '',
    reservePhone: '',
    reserveStreetId: '',
    testData: [
      { id: 1, name: '洪女士', date: '09:12' },
      { id: 2, name: '郎先生', date: '13:27' },
      { id: 3, name: '倪先生', date: '10:38' },
      { id: 5, name: '徐先生', date: '11:42' },
      { id: 4, name: '潘女士', date: '13:52' }
    ],
    showIds: [1, 2]
  }),

  mounted() {
    // console.log(this.formstate)
    var _this = this

    setInterval(function () {
      _this.changeUl()
    }, 3000)

    Query.get('/dashboard/addresses/all_province').then((data) => {
      if (data.status === 'ok') {
        _this.allProvinces = data.data
      }
    }).catch((error) => {
      ErrorDialog.show(error.message)
    })

    var selects = $(this.$el).find('select');
    return selects.change(function () {
      var $this, next_selects;
      $this = $(this);
      next_selects = selects.slice(selects.index(this) + 1);
      $("option:gt(0)", next_selects).remove();
      if (next_selects.first()[0] && $this.val() && !$this.val().match(/--.*--/)) {
        return $.get("/china_city/" + $(this).val() + "?is_simple=true", function (data) {
          var i, len, option;
          if (data.data != null) {
            data = data.data;
          }
          for (i = 0, len = data.length; i < len; i++) {
            option = data[i];
            next_selects.first()[0].options.add(new Option(option[0], option[1]));
          }
          return next_selects.trigger('china_city:load_data_completed');
        });
      }
    });

  },

  methods: {
    onSubmit: function () {
      var _this = this
      if (!this.formstate.$invalid) {
        let reserve = {
          survey_fee_id: 1,
          contact_name: _this.reserveName,
          address_desc: _this.reserveDetail,
          desc: '测量详情'
        }
        let user = {
          mobile: _this.reservePhone,
          sms_code: _this.reserveCode,
        }
        let address = {
          street_id: _this.reserveStreetId
        }

        Query.post('/reserves', {
          reserve: reserve,
          user: user,
          address: address
        }).then((data) => {
          //console.log(data);

          if (data.flag) {
            SuccessDialog.show('预约成功！')
            window.location.replace(data.data)
          } else {
            ErrorDialog.show(err.message)
          }
        }).catch((err) => {
          ErrorDialog.show(err.message)
        })
      }
    },
    jugeShow: function (index) {
      if (this.showIds.indexOf(index) != -1) {
        return true
      } else {
        return false
      }
    },
    changeUl: function () {
      var _this = this
      let keyId = _this.showIds[1]
      let currentIndex = _this.testData.indexOf(_this.testData.filter((item) => { return item.id === keyId })[0])
      let nextIndex = currentIndex === _this.testData.length - 1 ? 0 : currentIndex + 1

      _this.showIds.shift()
      _this.showIds.push(_this.testData[nextIndex].id)
    }
  }
}
</script>

<style lang="less" scoped>
@media screen and (min-width: 769px) {
  .vue-home-reserve {
    position: absolute;
    top: 70px;
    right: 15px;
    width: 200px;
    height: 380px;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.8);

    h1 {
      font-size: 16px;
    }

    .input-field {
      &:not(:first-child) {
        margin-top: 10px;
      }

      .error {
        border-color: red;
      }

      .s-first {
        padding-right: 7px;
      }
      .s-last {
        padding-left: 8px;
      }

      input,
      select {
        outline: none;
        border-radius: 0;
        box-shadow: none;
      }

      select {
        -webkit-appearance: button;
      }
    }

    hr {
      margin: 0 15px 15px 15px;
      border-color: #37ca73;
    }

    .gun-dong {
      color: #37ca73;
      height: 100px;
      overflow: hidden;
      display: flex;
      flex-flow: column nowrap;

      li {
        >div {
          color: #222222;
          font-size: 12px;
        }

        &:not(:last-child) {
          margin-bottom: 15px;
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .reserve-bg{
    width: 100%;
    height: 80px;
    height: 21.33vw;
  }
  .s-first{
    padding-left: 0;
    padding-right: 0;
  }
  .s-last {
    padding-left: 0;
    padding-right: 0;
  }

  form{
    padding: 15px 20px;
    padding: 4vw 5.3vw;

    .col-sm-12, .col-sm-6 {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    input, input:focus, input:active, input:hover, select, select:focus, select:active, select:hover {
      border: 0px;
      border-radius: 0;
      border-bottom: 1px solid #e5e5e5;
      padding: 15px 0;
      padding: 4vw 0;
      outline: none;
      box-shadow: none;
      height: inherit;
      appearance:none;
      -moz-appearance:none;
      -webkit-appearance:none;
    }

    input{
    }

    select{
    }

    .submit, .submit:hover, .submit:focus, .submit:active{
      margin-top: 20px;
      margin-top: 5.33vw;
      border-radius: 5px;
      border-radius: 1.33vw;
      font-size: 18px;
      font-size: 4.8vw;
      outline: none;
      border-color: #f5ad4f !important;
      background-color: #f5ad4f !important;
      box-shadow:0 3px 9px 0 #f5ad4f !important;
    }

    .error{
      border-color: red;
    }
  }
}
</style>
